<template>
  <PageWrapper>
    <template #headerContent>
      <h1 style="font-size: 20px; line-height: 40px">文本复制示例</h1>
    </template>

    <p>
      Current copied: <code>{{ text || 'none' }}</code>
    </p>
    <div v-if="isSupported" class="demo">
      <el-input v-model="value" placeholder="请输入" />
      <el-button @click="copy(value)" type="primary">copy</el-button>
    </div>

    <p v-else>Your browser does not support Clipboard API</p>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue'
import { PageWrapper } from '@/components/Page/index'
import { useClipboard } from '@vueuse/core'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: { PageWrapper },
  setup() {
    const value = ref('')
    const { text, isSupported, copy, copied } = useClipboard()

    watchEffect(() => {
      copied.value &&
        ElMessage({
          message: '复制成功',
          type: 'success'
        })
    })

    return { value, copy, isSupported, text }
  }
})
</script>

<style scoped>
.demo {
  display: flex;
}
</style>
